const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path')
const webpack = require('webpack')
const common = require('./webpack.common')
const {merge} = require('webpack-merge')

module.exports = merge(common,{
    mode:'development',
    devtool:'cheap-module-eval-source-map',
    // eslint-loader
    module:{
        rules:[
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                use: 'eslint-loader',
                enforce:'pre' //预处理eslint-loader规则 eslint-loader规则要优先于babel-loader规则
              },
              {
                test:/\.(le|c)ss$/,
                use:[{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      hmr:true,//支持在开发中对css文件进行热重新加载设置
                      reloadAll: true,//如果hmr不启作用
                    },
                  },
                  'css-loader',
                  'less-loader'
                ]
                //依次使用以上loader加载css文件,从后向前使用
            },
        ]
    },
    //开发服务器
    devServer: {
        port: 9001,//端口号
        open: true,//第一次构建完成是否自动打开浏览器
        hot: true //启用 webpack 的模块热替换特性
    },
      plugins: [
        //模块热替换插件
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
          // 选项类似于webpackoptions.output中的相同选项
          // 这两个选项都是可选的
          filename: '[name].css',
          chunkFilename: '[id].css',
        }),
      ]
})